<template>
  <view>
    <u-navbar title="个人中心" :border-bottom="false" :is-back="false" />
    <view class="header flex justify-between align-center padding bg-white">
      <view class="flex align-center">
        <image :src="info.avatar" class="ava-img radius-50" v-if="info.avatar" />
        <image src="/static/logo.png" class="ava-img radius-50" v-else />
        <view class="padding-left-sm">{{info.nickname}}</view>
      </view>
      <view class="header-edit radius-30 text-center" @click="handleEdit">
        <text class="padding-right text-666 text-sm">编辑</text>
        <image src="/static/my/icon1.png" class="edit-img" />
      </view>
    </view>
    <view class="modal flex align-center bg-white radius-20">
      <view class="modal-item text-center" @click="handleMyOrder">
        <image src="/static/my/icon2.png" class="icon-img" />
        <view class="padding-top-sm">我的订单</view>
      </view>
      <view class="modal-item text-center" @click="handleMyConsultation">
        <image src="/static/my/icon3.png" class="icon-img" />
        <view class="padding-top-sm">我的咨询</view>
      </view>
    </view>
    <!-- v-if="group_id==2" -->
    <!-- 		<view class="w-690 border-lr flex justify-between align-center padding bg-white" @click="handleCreateOrder">
			<view class="flex align-center">
				<image src="/static/my/icon4.png" class="cell-img" />
				<view class="padding-left-sm">创建订单</view>
			</view>
			<u-icon name="arrow-right" color="#A0A3AF" />
		</view> -->
    <u-button type="primary" :custom-style="customStyle" open-type="contact">
      <view class="w-690 border-lr flex justify-between align-center bg-white padding">
        <view class="flex align-center">
          <image src="/static/my/icon4.png" class="cell-img" />
          <view class="padding-left-sm">官方客服</view>
        </view>
        <u-icon name="arrow-right" color="#A0A3AF" />
      </view>
    </u-button>
    <view class="w-690  flex justify-between align-center padding bg-white" @click="handleAge(2)">
      <view class="flex align-center">
        <image src="/static/my/icon5.png" class="cell-img" />
        <view class="padding-left-sm">用户协议</view>
      </view>
      <u-icon name="arrow-right" color="#A0A3AF" />
    </view>
    <view class="w-690 border-bl flex justify-between align-center padding bg-white" @click="handleAge(3)">
      <view class="flex align-center">
        <image src="/static/my/icon6.png" class="cell-img" />
        <view class="padding-left-sm">关于我们</view>
      </view>
      <u-icon name="arrow-right" color="#A0A3AF" />
    </view>
    <view class="cell-box padding-top-lg">
      <u-button type="primary" :custom-style="customStyle5" @click="handleOut">退出登录</u-button>
    </view>
    <u-tabbar v-model="current" :list="tabBarList" :border-top="false" inactive-color="#C8C8C8" @change="handleTabbar"
      :is-back="false" />
  </view>
</template>

<script>
  import {
    tabbarListUser,
    tabbarListlLawyer,
    customStyle5
  } from '@/utils/common.js';
  export default {
    data() {
      return {
        customStyle5,
        tabbarListlLawyer,
        tabbarListUser,
        tabBarList: [],
        current: 2,
        info: {},
        group_id: null,
        customStyle: {
          width: '690rpx',
          border: 'none',
          padding: '30rpx 0',
          background: 'transparent',
          color: '#333'
        },
        csteam: null
      };
    },
    onLoad() {
      this.group_id = uni.getStorageSync('group_id');
      let inx = uni.getStorageSync('tabBarIndex');
      if (inx == 0) {
        this.tabBarList = this.tabbarListUser;
      } else {
        this.tabBarList = this.tabbarListlLawyer
      }
      this.initInfoData();
    },
    onShow() {
      // this.initInfoData();
      let team = uni.getStorageSync('team');
      this.csteam = this.goEasy.im.csteam(team.id);
    },
    methods: {
      handleTabbar(index) {
        let url = null;
        if (uni.getStorageSync('tabBarIndex') == 0) {
          url = ['/pages/index/index', '/pages/message/message', '/pages/my/my']
        } else {
          this.current = 1;
          url = ['/pages/conversations/conversations', '/pages/my/my']
        }
        uni.reLaunch({
          url: url[index]
        })
      },
      handleCreateOrder() {
        uni.navigateTo({
          url: '/pages/my/create-order'
        })
      },
      initInfoData() {
        this.$u.api._myIndex().then(res => {
          this.info = res.data;
        })
      },
      handleMyOrder() {
        uni.navigateTo({
          url: '/pages/my/my-order'
        })
      },
      handleMyConsultation() {
        uni.navigateTo({
          url: '/pages/my/my-consultation'
        })
      },
      handleAge(index) {
        uni.navigateTo({
          url: '/pages/my/about-us?type=' + index
        })
      },
      handleEdit() {
        uni.navigateTo({
          url: '/pages/my/my-info'
        })
      },
      handleOut() {
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确定退出当前登录?',
          success: (resd) => {
            if (resd.confirm) {
              let group_id = uni.getStorageSync('group_id');
              console.log("group_id", group_id);
              if (group_id == 0) {
                console.log("goEasy", this.goEasy);
                // 如果连接了gosy就断开,没有连接就直接退出
                if (this.goEasy.getConnectionStatus() !== 'disconnected') {
                  this.goEasy.disconnect({
                    onSuccess: function() {
                      // this.$u.api._logout().then(res=>{
                      uni.showToast({
                        title: '退出成功！',
                        icon: 'none'
                      });
                      console.log("GoEasy disconnect successfully.");
                      uni.clearStorage();
                      setTimeout(() => {
                        uni.reLaunch({
                          url: '/pages/user-login/user-login'
                        })
                      }, 1500)
                      // })
                    },
                    onFailed: function(error) {
                      console.log("Failed to disconnect GoEasy, code:" + error.code + ",error:" + error
                        .content);
                    }
                  })
                } else {
                  uni.showToast({
                    title: '退出成功！',
                    icon: 'none'
                  });
                  console.log("GoEasy disconnect successfully.");
                  uni.clearStorage();
                  setTimeout(() => {
                    uni.reLaunch({
                      url: '/pages/user-login/user-login'
                    })
                  }, 1500)
                }
              }
              if (group_id != 0) {
                console.log("getConnectionStatus", this.goEasy.getConnectionStatus());
                if (this.goEasy.getConnectionStatus() !== 'disconnected') {
                  this.goEasy.disconnect({
                    onSuccess: function() {
                      console.log("GoEasy disconnect successfully.");
                      setTimeout(()=>{
                        self.$u.api._logout().then(res => {
                          uni.showToast({
                            title: '退出成功！',
                            icon: 'none'
                          });
                        
                          uni.clearStorage();
                          setTimeout(() => {
                            uni.reLaunch({
                              url: '/pages/user-login/user-login'
                            })
                          }, 1500)
                        })
                      }, 500)
                    },
                    onFailed: function(error) {
                      console.log("Failed to disconnect GoEasy, code:" + error.code + ",error:" + error
                        .content);
                    }
                  })
                } else {
                  self.$u.api._logout().then(res => {
                    uni.showToast({
                      title: '退出成功！',
                      icon: 'none'
                    });
                    console.log("GoEasy disconnect successfully.");
                    uni.clearStorage();
                    setTimeout(() => {
                      uni.reLaunch({
                        url: '/pages/user-login/user-login'
                      })
                    }, 1500)
                  })
                }
                // this.csteam.offline({
                //   onSuccess: () => {
                //     console.log("点击了下线-成功");
                //     this.$u.api._logout().then(res=>{
                //       uni.showToast({
                //         title: '退出成功！',
                //         icon: 'none'
                //       });
                //       console.log("GoEasy disconnect successfully.");
                //       uni.clearStorage();
                //       setTimeout(() => {
                //         uni.reLaunch({
                //           url: '/pages/user-login/user-login'
                //         })
                //       }, 1500)
                //     })
                //   },
                //   onFailed: (error) => {
                //     console.log("点击了下线", error);
                //     if (error.content.includes("Please end your accepted conversations first")) {
                //       uni.showToast({
                //         title: '下线失败，请先结束已接入的会话！',
                //         icon: 'none'
                //       });
                //     }
                //   }
                // })
              }
            }
          }
        });
      }
    },
  }
</script>

<style lang="scss">
  .header {
    width: 100%;
    height: 160rpx;
  }

  .ava-img {
    width: 96rpx;
    height: 96rpx;
  }

  .header-edit {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid #DDD;

    .edit-img {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .icon-img {
    width: 56rpx;
    height: 56rpx;
  }

  .modal {
    width: 690rpx;
    height: 188rpx;
    margin: 30rpx auto 50rpx auto;

    &-item {
      width: 50%;
      border-right: 2rpx solid #F7F8FA;
    }
  }

  .cell-img {
    width: 48rpx;
    height: 48rpx;
  }

  .w-690 {
    margin: 0 auto;
  }

  .border-lr {
    border-radius: 20rpx 20rpx 0 0;
  }

  .border-bl {
    border-radius: 0 0 20rpx 20rpx;
  }
</style>